<template>
    <IIView v-model="defaultValue" :loading="loading">
        <Card :dis-hover="false">
            <h3>客户[{{data.name}}]详情页面</h3>
        </Card>
        <Row :gutter="20">
            <Col span="18">
                <Card>
                    <div slot="title">基础信息</div>
                    <Row>
                        <ItemCol :span="6">
                            <template slot="title">客户代码:</template>
                            {{data.code}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">公司名称:</template>
                            {{data.name}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">公司简称:</template>
                            {{data.short_name}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">客户状态:</template>
                            <span v-if="data.status === 0">待审核</span>
                            <span v-if="data.status === 1">审核中</span>
                            <span v-if="data.status === 2">驳回审核</span>
                            <span v-if="data.status === 3">已审核</span>
                            <span v-if="data.status === 4">冻结</span>
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">入驻时间:</template>
                            <span>{{data.created_at}}</span>
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">营业执照:</template>
                            <a @click="openComponent('ModalCarousel', {lists: [data.license]})">点击查看</a>
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">保证金:</template>
                            <span v-if="data.assure === 0">账册企业</span>
                            <span v-if="data.assure === 1">电商企业</span>
                            <span v-if="data.assure === 2">物流企业</span>
                        </ItemCol>
                        <ItemCol :span="24">
                            <template slot="title">备注:</template>
                            {{data.remark}}
                        </ItemCol>
                    </Row>
                </Card>
            </Col>
            <Col span="6">
                <Card>
                    <div slot="title">主账号信息</div>
                    <div class="line-profile" v-if="data.user !== null">
                        <p>
                            <Icon type="logo-android"/>
                            {{data.user.name}}
                        </p>
                        <p>
                            <Icon type="ios-mail-outline"/>
                            {{data.user.email}}
                        </p>
                        <p>
                            <Icon type="ios-phone-portrait"/>
                            {{data.user.phone}}
                        </p>
                        <p>
                            <Icon type="md-lock" />
                            <Button size="small" type="text" @click="submitForUpdatePassword">修改密码</Button>
                        </p>
                        <p>
                            <Icon type="ios-basket" />
                            <Button size="small" type="text" @click="loginCustomer">登录后台</Button>
                        </p>
                    </div>
                    <div v-else>
                        还没有<a @click="openComponent('AddUser', {id: data.id})">添加</a>主账号！
                    </div>
                </Card>
            </Col>
        </Row>


        <Card>
            <Tabs>
                <TabPane label="日志" name="name1">
                    <ILogs v-model="data.logs"></ILogs>
                </TabPane>
            </Tabs>
        </Card>
        <component v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props"
                   @input="getData()"></component>
    </IIView>
</template>

<script>
    import IIView from "../../../../components/layout/IIView";
    import IViewMixins from "../../../../mixins/iViewMixins";
    import ItemCol from "../../../../components/layout/ItemCol";
    import ILogs from "../../../../components/layout/ILogs";
    import AddUser from "./addUser";
    import ModalCarousel from "../../../../components/layout/ModalCarousel";

    export default {
        components: {ModalCarousel, ILogs, ItemCol, IIView, AddUser},
        mixins: [IViewMixins],
        data() {
            return {
                loading: false,
                data: {
                    user: null,
                    logs: []
                }
            }
        },
        methods: {
            getData() {
                this.loading = true;
                this.$http.get(`customer/index/${this.props.id}`).then((res) => {
                    this.data = res;
                }).finally(() => {
                    this.loading = false;
                });
            },
            submitForUpdatePassword(){
                this.loading = true;
                this.$http.put(`customer/index/${this.props.id}/password`).then((res) => {
                    this.$Message.success(`密码已发送到邮箱！`);
                }).finally(() => {
                    this.loading = false;
                });
            },
            loginCustomer(){
                window.open(`/customer/${this.props.id}`, '_blank');
            }
        }
    }
</script>

<style scoped>
    .ivu-card {
        margin-bottom: 15px;
    }

    .center {
        text-align: center;
    }

    .line-profile .ivu-icon {
        margin-right: 10px;
    }

    .line-profile .ivu-tag-color-primary {
        cursor: pointer;
    }
</style>
